<template>
  <div class="ComFromListStyleBox">
    <div class="ComFromListBox">
           <p>名称：<input type="text" v-model="val" @input="search" placeholder="请输入页面名称" /></p>
          <p>路径：<input type="text" placeholder="请输入页面路径" /></p>
          <p>
            状态：<select name="" id="">
              <option value="">已发布</option>
              <option value="">草稿</option>
            </select>
          </p>
          <p>
            <a-button type="primary">搜索</a-button>
            <a-button>重置 </a-button>
          </p>  
    </div>
    <div class="ComFromListStyleBox_HeaderTitle">
      <p>
        <a-button>发布</a-button>&nbsp; <a-button>下载</a-button>&nbsp;
        <a-button danger ghost>删除</a-button>
      </p>
      <p></p>
      <p>
        <router-link to="/editor">
          <a-button type="primary"><plus-outlined />新增</a-button>&nbsp;
        </router-link>
        <reload-outlined />
      </p>
    </div>
    <div class="ComFromListStyleBox_contextTitle">
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
          type="checkbox"
          name=""
          id=""
        />&nbsp;名称
      </p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;路径</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;顺序</p>
      <p>阅读量</p>
      <p>状态</p>
      <p>发布时间</p>
      <p>操作</p>
    </div>
    <div
      v-for="(item, idx) in ComFromListStyleBoxMockArray"
      :key="idx"
      class="ComFromListStyleBox_contextFromList"
    >
      <p><input type="checkbox" name="" id="" />&nbsp;{{ item.title }}</p>
      <p>sss</p>
      <p>{{ item.id }}</p>
      <p>
        <a-badge
          :count="item.userId"
          :number-style="{ backgroundColor: '#52c41a' }"
        />
      </p>
      <p>
        <a-tooltip title="Ant User" placement="top">
          <a-avatar
            style="background-color: #87d068; width: 10px; height: 10px"
          >
          </a-avatar> </a-tooltip
        >&nbsp;已发布
      </p>
      <p>2022.2.28</p>
      <div class="CaoZuoFROM">
        <p><router-link to="/editor">编辑</router-link></p>
        <p @click="warning"><a href="#">下载</a></p>
        <p>
          <a href="#"><ExamineStyleBox></ExamineStyleBox></a>
        </p>
        <p @click="DelMockBlogs(item)"><a href="#">删除</a></p>
      </div>
    </div>
    <div class="PageComFromList">
      <p></p>
      <p></p>
      <p><a-pagination :total="total" /></p>
    </div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import ExamineStyleBox from "../ExamineStyleBox/index.vue";
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons-vue";
import Axios from "axios";
export default {
  data() {
    return {
      ComFromListStyleBoxMockArray: [], //数据
      total: 0, //分页总长度
      val:""
    };
  },
  created() {
    this.ComFromListStyleBoxFunc(); //数据函数
  },
  methods: {
    async ComFromListStyleBoxFunc() {
      let res = await Axios.get("/api/BlogsMock");
      this.ComFromListStyleBoxMockArray = res.data.data;
      this.ComFromListStyleBoxMockArray.map((item) => {
        this.total = item.length;
      });
    },
    async DelMockBlogs(item) {
      let res = await Axios.delete(`/api/DelMock/${item.id}`);
      console.log(res,"Res");
      alert(res.data.message)
      this.ComFromListStyleBoxFunc(); //数据函数
    },
    warning() {
      message.warning("访客无权进行该操作");
    },
   async search(){
        let res = await Axios.post("/api/Search",{ val: this.val });
        this.ComFromListStyleBoxMockArray = res.data.list
    }
  },
  components: {
    PlusOutlined,
    ReloadOutlined,
    ExamineStyleBox,
  },
};
</script>

<style>
.ComFromListStyleBox {
  width: 100%;
  height: 100%;
}
.ComFromListStyleBox_HeaderTitle {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.ComFromListStyleBox_HeaderTitle > p {
  margin-top: 10px;
}
.ComFromListStyleBox_contextTitle {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.ComFromListStyleBox_contextTitle > p {
  width: 200px;
  margin-top: 10px;
}
.ComFromListStyleBox_contextFromList {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.ComFromListStyleBox_contextFromList > p {
  width: 100px;
}
.CaoZuoFROM {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.CaoZuoFROM > p {
  margin: 0px 10px;
}
.PageComFromList {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.PageComFromList > p {
  margin-top: 10px;
}
.ComFromListBox{
    width: 90%;
    top: 150px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
}
.ComFromListBox>p{
    margin-top: 10px;
}
</style>